<script setup>
import { ref } from "vue";
import { imgUrl } from "../../../utils/global";

const sortType = ref("desc");
</script>

<template>
  <view class="app-hospital">
    <view class="input-wrapper">
      <image
        class="input-icon"
        :src="imgUrl('/static/img/icons/search.png')"
        mode="aspectFill"
      ></image>
      <input type="text" placeholder="搜索分院" />
    </view>

    <view class="vip-wrapper">
      <view class="vip-item" v-for="index in 4" :key="`vip-item-${index}`">
        <image
          class="vip-bg"
          :src="imgUrl('/static/img/imgs/vip-bg.png')"
          mode="aspectFill"
        ></image>
        <view class="vip-mask"></view>
        <image
          class="vip-logo"
          :src="imgUrl('/static/img/imgs/vip-logo.png')"
          mode="aspectFill"
        ></image>
        <text class="vip-title">亭林医院体检中心</text>
        <text class="vip-subtitle">尊享vip服务</text>
      </view>
    </view>

    <view class="filter-wrapper">
      <view class="filter-item">
        <text>区域</text>
        <image
          class="filter-icon"
          :src="imgUrl('/static/img/icons/bottom-arrow.png')"
          mode="aspectFill"
        ></image>
      </view>

      <view class="filter-item">
        <text>营业时间</text>
        <image
          class="filter-icon"
          :src="imgUrl('/static/img/icons/bottom-arrow.png')"
          mode="aspectFill"
        ></image>
      </view>

      <view class="filter-item">
        <text>体验服务</text>
        <image
          class="filter-icon"
          :src="imgUrl('/static/img/icons/bottom-arrow.png')"
          mode="aspectFill"
        ></image>
      </view>

      <view
        class="sort-item"
        @click="() => (sortType = sortType === 'desc' ? 'asc' : 'desc')"
      >
        <image
          class="sort-icon"
          :src="imgUrl(`/static/img/icons/sort${sortType === 'desc' ? 1 : 2}.png`)"
          mode="aspectFill"
        ></image>
      </view>
    </view>

    <view class="list-wrapper">
      <view class="list-item" v-for="index in 7" :key="`list-item-${index}`">
        <view class="item-row">
          <image
            class="item-img"
            :src="imgUrl('/static/img/imgs/vip-bg.png')"
            mode="aspectFill"
          ></image>

          <view class="info-wrapper">
            <text>亭林医院体检中心</text>

            <view class="tag-wrapper">
              <text class="tag-active" v-if="index === 1">距您最近</text>
              <text>体检中心</text>
              <text>免费WiFi</text>
            </view>

            <view class="location-wrapper">
              <text>上海市金山区亭林镇寺平阿斯加德拉时间段</text>
              <text>1.5km</text>
            </view>
          </view>
        </view>
        <view class="item-split"></view>
        <view class="detail-wrapper">
          <text>查看分院详情</text>
          <uni-icons type="right" size="15" color="#FF7F36"></uni-icons>
        </view>
      </view>
    </view>
  </view>
</template>

<style src="./style.scss" scoped />
